<template>
	<view class="foodList">
	      <view ref="container" >
			<view class="qingdan">- 食材清单 -</view>
	        <uni-list>
	            <uni-list-item   :title="item.title" :rightText="item.note" v-for="(item,index) in  recipe.major" :key="index" class="food"></uni-list-item>
	        </uni-list>
	      </view>
	        
	  </view>
</template>

<script>
	export default {
		name:"MenuDetailFoodList",
		props:["recipe"],
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
	.foodList{
		.qingdan{
			text-align: center;
			font-size: 16px;
			font-weight: 600;
			margin-top: 10px;
			margin-bottom: 30px;
		}
		// .food{
		// 	view{
		// 		background-color: #f5f5f5 !important;
		// 	}
		// }
		.uni-list-item {
			background-color: #f5f5f5;
		}
		.food{
			view{
				background-color: #f5f5f5 !important;
			}
			.uni-list-item {
				background-color: #f5f5f5;
			}
			.uni-list-item__container{
				.uni-list-item__extra{
					.uni-list-item__extra-text{
							font-size: 15px;
					}
				}
			}
		}
		
	}
</style>
